<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <style>
        html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
        #row2{
            margin-bottom:180px;
        }
        .pre_home{
            width:98%;
            height:100%;
            margin-left: 0.5%;
        }
        body{
            background-color:#F6F7F9;
        }
        #put_screen{
            position: absolute;
        }
        .div_tit{
            width:98%;
            height:50px;
            background-color:#F2F2F2;
            border:2px solid #E6E6E6;
            margin-bottom: 10px;
            margin-left: 0.5%;
        }
        .tit_span{
            margin-left:10px;
            margin-top:-20px;
        }
        #div_id{
            margin-top:-26px;
            margin-left:85%;
            position: absolute;
        }
        .tit_btn2{
            position: absolute;
        }
        .div_ic{
            width:5px;
            height:20px;
            background-color:#1ABC9C;
            margin-top:15px;
        }

        .div_index{
            width: 100%;
            height:120px;
            margin-bottom:10px;
            border:1px solid #E6E6E6;
        }
        .div_index_title{
            width:100%;
            height:50px;
            background-color:#F3F3F3;
            /*border:1px solid #E6E6E6;*/
            font-weight:bold;
            line-height:55px;
            font-size:1rem; /* = 16px*/
            text-indent:18px;
            color:#666666;
        }
        .index_btns1{
            width:75px;
            height: 35px;
            margin-left: 82.9%;
            margin-top: 8px;
            position: absolute;
        }

        .div_index_input{
            width:100%;
            /*height:72px;*/
            background-color:#FFFFFF;
            border-top: 1px solid #E6E6E6;
        }
        .index_li_item{
            margin-top:17px;
            width:28%;
            float:left;
        }
        #indexBtn{
            width: 70px;
            margin-top: 19px;
            height: 35px;
            margin-left: 1.5%;
        }
        #resetBtn{
            width: 70px;
            margin-top: 19px;
            height: 35px;
        }
        #btn_icom{
            font-size: 15px;
            margin-left: -9px;
        }
        #btn_icom1{
            font-size: 15px;
            margin-left: -9px;
        }
        .layui-form-label {
            position: relative;
            float: left;
            display: block;
            padding: 9px 15px;
            width: 35%;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
        .layui-input{
            display: block;
            width: 60%;
            padding-left: 10px;
        }
        #div_id1{
            height: 70px;
        }
        .layui-btn-sm {
            height: 35px;
            line-height: 18px;
            padding: 10px;
            font-size: 12px;
        }
        @media screen and (max-width:1200px) {
            #btn_id{
                margin-left: 84%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 81.9%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:84.3%;
                position: absolute;
            }
        }
        @media screen and (max-width:1100px) {
            #current{
                display: none;
            }
            #btn_id{
                margin-left: 81.5%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 79.2%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:82%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:37%;
                float:left;
            }
        }
        @media screen and (max-width:1000px) {
            #current{
                display: none;
            }
            #btn_id{
                margin-left: 76.5%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 74.2%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:77.7%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:34%;
                float:left;
            }
            .layui-input, .layui-textarea {
                display: block;
                width: 90%;
                padding-left: 10px;
            }
        }
        @media screen and (max-width:800px) {
            #current{
                display: none;
            }
            #search{
                display: none;
            }
            #btn_id{
                margin-left: 71%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 68.6%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:72.7%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:40%;
                float:left;
                margin-left: 5%;
            }
            .layui-input, .layui-textarea {
                display: block;
                width: 90%;
                padding-left: 10px;
            }
        }
        @media screen and (max-width:600px) {
            #current{
                display: none;
            }
            #search{
                display: none;
            }
            #btn_id{
                margin-left: 66%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 63.4%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:68.7%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:34%;
                float:left;
                margin-left: 5%;
            }
            .layui-input, .layui-textarea {
                display: block;
                width: 200%;
                padding-left: 10px;
            }
        }
        @media screen and (max-width:500px) {
            #current{
                display: none;
            }
            #search{
                display: none;
            }
            #product{
                display: none;
            }
            #btn_id{
                margin-left: 58%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 55.2%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:61.7%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:34%;
                float:left;
                margin-left: 5%;
            }
            .layui-input, .layui-textarea {
                display: block;
                width: 200%;
                padding-left: 10px;
            }
        }
        @media screen and (max-width:400px) {
            #current{
                display: none;
            }
            #search{
                display: none;
            }
            #product{
                display: none;
            }
            #btn_id{
                margin-left: 41%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 38%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:46.7%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:34%;
                float:left;
                margin-left: 5%;
            }
            .layui-input, .layui-textarea {
                display: block;
                width: 200%;
                padding-left: 10px;
            }
        }
        @media screen and (max-width:300px) {
            #current{
                display: none;
            }
            #search{
                display: none;
            }
            #product{
                display: none;
            }
            #refresh{
                display: none;
            }
            #btn_id{
                margin-left: 24%;
            }
            .index_btns1{
                width:75px;
                height: 35px;
                margin-left: 21%;
                margin-top: 8px;
                position: absolute;
            }
            #div_id{
                margin-top:-26px;
                margin-left:58.7%;
                position: absolute;
            }
            .index_li_item{
                margin-top:17px;
                width:34%;
                float:left;
                margin-left: 5%;
            }
            .layui-input, .layui-textarea {
                display: block;
                width: 200%;
                padding-left: 10px;
            }
        }
        .btnRight{
            margin-left: 78%;
        }
    </style>
</head>
<body>
<div class="layui-row" id="row2">
    <div class="layui-col-md12 layui-col-xs12 layui-col-sm12 layui-col-lg12">
        <!-- 头部 -->
        <div class="div_tit" >
            <div class="div_ic"></div>
            <p class="tit_span">个人商品列表<p>
            <div id="div_id">
                <button onclick="refresh()" type="button" class="layui-btn tit_btn layui-btn-sm" id="refresh">
                    <i class="layui-icon layui-icon-refresh"></i>刷新
                </button>
                <button onclick="backOff()" type="button" class="layui-btn tit_btn2 layui-btn-sm">
                    <i class="layui-icon layui-icon-return"></i>返回
                </button>
            </div>
        </div>
    </div>
    <!-- 头部结束 -->
    <div class="layui-col-md12 layui-col-xs12 layui-col-sm12 layui-col-lg12">
        <div class="pre_home">
            <!-- 检索 -->
            <div class="div_index">
                <div class="div_index_title">
                    <i class="layui-icon layui-icon-search"></i>
                    筛选查询
                    <button type="button" class="layui-btn layui-btn-xs index_btns1" id="put_screen" onclick="retrieval()">
                        高级检索
                    </button>
                </div>
                <div class="div_index_input" id="div_id1">
                    <form class="layui-form" id="selIndex">
                        <ul class="div_index_ul">
                            <li class="index_li_item" id="product">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品名称:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="product_name" placeholder="请输入商品名称" class="layui-input" id="product_name">
                                    </div>
                                </div>
                            </li>
                            <li class="index_li_item class_none" id="search">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品关键字:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="search_keywords" placeholder="请输入商品关键字" class="layui-input" id="search_keywords">
                                    </div>
                                </div>
                            </li>
                            <li class="index_li_item class_none" id="current">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品价格:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="currentprice_product" placeholder="请输入商品价格" class="layui-input" oninput = "value=value.replace(/[^\d]/g,'')" id="currentprice_product">
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="div_index_ul1" id="btn_id">
                            <button type="button" class="layui-btn" id="indexBtn">
                                <i class="layui-icon layui-icon-search" id="btn_icom"></i>
                                搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-danger" id="resetBtn">
                                <i class="layui-icon layui-icon-refresh-3" id="btn_icom1"></i>
                                重置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 数据列表 -->
            <div class="layui-row backColor" style="margin-top: 20px">
                <div class="layui-panel headerCenter ">
                    <!--选择分类类型-->
                    <div class="layui-col-md2">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                    <div id="toolutil" style="display: none;">
                        <span>
                            <i class="layui-icon layui-icon-align-left"></i>
                            个人商品列表
                        </span>
                    </div>
                    <!--商品表格-->
                    <div class="layui-col-md8">
                        <table id="demo" lay-filter="test" class=""></table>
                    </div>
                </div>
            </div>
        </div>
</div>
<script>
    layui.use(['form','jquery','table'],function() {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;


        table.render({
            elem: '#demo',
            url: '/json/tab.json',
            width:1700,
            toolbar: '#toolutil',
            cols: [[
                {checkbox: true},
                {field: 'title', title: '商品标题', align: 'center'},
                {
                    field: 'title', title: '商品图片', align: 'center', templet: function (data) {
                        return "<img src='/images/shangpin.png'/>";
                    }
                },
                {field: 'title', title: '商品名称', align: 'center'},
                {field: 'title', title: '商品价格', align: 'center'},
                {
                    field: 'title', title: '上架/下架', align: 'center', templet: function (data) {
                        return "<input type='checkbox' name='zzz' lay-skin='switch' lay-text='上架|下架'>";
                    }
                },
                {field: 'title', title: '商品分类', align: 'center'},
                {field: 'title', title: '商品标签', align: 'center'},
                {
                    field: 'title', title: '审核状态', align: 'center', templet: function (data) {
                        return "<div>审核通过</div>" +
                            "<a class='operation'>审核详情</a>";
                    }
                },
                {
                    field: 'title', title: '操作', align: 'center', templet: function (data) {
                        return "<a class='operation'>查看</a>  <a class='operation'>编辑</a> <br/>" +
                            "<a class='operation'>日志</a>  <a class='operation'>删除</a>";
                    }
                },
            ]]
        });

        function backOff() {
            var arr = localStorage.getItem("numArr");
            var numArr = arr.split(",");
            numArr.pop();
            window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
            localStorage.setItem("numArr",numArr);
        }
    });

    //刷新
    function refresh() {
        window.location.reload();
    }
</script>
</body>
</html>